<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<view v-if="isLogin" class="body">	
			
			<view class="step-bar">
				<view class="fix-wrap">
					<view class="item active">
						<view class="icon iconfont">&#xe8cc;</view>
						<text class="text">基本信息</text>
					</view>
					<view class="item active">
						<view class="icon iconfont f-s38">&#xe621;</view>
						<text class="text">上传合同</text>
					</view>
					<view class="item">
						<view class="icon iconfont">&#xec35;</view>
						<text class="text">阶段任务</text>
					</view>
					<view class="item">
						<view class="icon iconfont">&#xe659;</view>
						<text class="text">回款计划</text>
					</view>
					<view class="item">
						<view class="icon iconfont">&#xeb67;</view>
						<text class="text">发送审批</text>
					</view>
				</view>	
			</view>
			
			<view class="project-form-wrap m-b2">
				<view class="hd-title">上传合同</view>
				<view class="upload-area">
					<c-uploadFile type='1' :pro_id="id" task_id=""></c-uploadFile> 							
				</view>
			</view>
			
			  
		</view> 
		<view class="footer">
			<view class="fix-wrap created-btn-wrap">
				<!-- <view class="btn submit-btn">提交</view> -->
				<navigator :url="'/package_project/created_step-3/created_step-3?id='+id" hover-class="none" class="btn next-btn">下一步</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				isLogin:false,
				isIphoneX:getApp().globalData.isIphoneX,
				id:'' 
			}
		},
		onLoad(params) {
			this.isLogin=this.$loginState('check');
			this.id=params.id;
		},
		methods: {
			
			checkFiles(){
				uni.getSavedFileList({
					success: function (res) { 
					}
				})
			} 
			
		}
	}
</script>

<style lang="less" scoped>
	.upload-area{
		padding: 20rpx;
		background: #fff;
		.icon{
			margin-bottom: 40rpx;
			text-align: center;
			font-size: 160rpx;
			color:#0099ff;
		}
		.btn{
			width: 50%;
			height: 70rpx;
			line-height: 70rpx;
			margin: 0 auto;
			background: #09f;
			border-radius: 8rpx;
			color:#fff;
			font-size: 30rpx;
			text-align: center;
			
		}
	}
	.hd-title{
		margin:0 20rpx 20rpx;
		padding-left:20rpx;
		border-left: 8rpx solid #0099ff;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.created-btn-wrap{
		display: flex;
		.btn{
			height: 80rpx;
			line-height: 80rpx;
			margin: 10rpx 10rpx 0;
			flex-grow: 1;
			border-radius: 8rpx;
			text-align: center;
			font-size: 30rpx;
			color:#fff;
		}
		.next-btn{
			background: #ff9600; 
		}
		.submit-btn{
			background: #0099ff; 
		}
	} 
	.step-bar{
		height: 90rpx;
		margin-bottom: 20rpx;
		.fix-wrap{
			display: flex;
			height: 90rpx;
			background: #fff;
		}
		.item{
			flex-grow: 1;
			width: 25%;
			text-align: center;
			color:#999;
			.text{
				font-size: 28rpx;				
			}
			.icon{
				width: 40rpx;
				height: 40rpx;
				margin:0 auto 0; 
			}
		}
		.active{
			.text,.icon{
				color:#09f;				
			} 
		}
	}
</style>
